<template>
    <div class="container">
        <div class="container__nav" >
            <div style="flex:1;" v-for="(item) in itemList" :key="item.id">
                <router-link :to="`${item.path}`">
                    <span class="iconfont container__nav__icon" v-html="item.icon"></span>
                    <div style="margin-top: 3px;">{{item.name}}</div>
                </router-link>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    setup(){
        const itemList = [
            {name:'首页', icon: `&#xe6b8`,path:'/'},
            {name:'购物车', icon: '&#xe607;',path: '/cart'},
            {name:'订单', icon: '&#xe713;',path: '/orderlist'},
            {name:'我的', icon: '&#xe78b;',path: '/my'},
        ];
        return { itemList }
    }
}
</script>
<style lang="scss" scoped>
*{
    margin-left: 0px;
    padding: 0;
}
    .container{
        width: 100%;
        position: fixed;
        bottom: 0px;
        background-color: #fff;
        border-top: 1px solid #F1F1F1;
        &__nav{
            margin-top: 4px;
            text-align: center;
            height: 49px;
            display: flex;
            &__icon{
                font-size: 20px;
            }
        }
    }
</style>